import React, { useEffect, useState } from 'react'
import styles from './index.module.scss'
import Tabs from '@/components/Tabs'
import { useDispatch, useSelector } from 'react-redux'
import { getAllChannels, getUserChannels } from '@/store/actions/home'
import Icon from '@/components/Icon'
import MoreAction from './components/MoreAction'
import { Popup } from 'antd-mobile'
import Channels from './components/Channels'
import ArticleList from './components/ArticleList'
import { RootType } from '@/store'
import { useHistory } from 'react-router-dom'

export default function Video() {
  const history = useHistory()
  const [visible, setVisible] = useState(false)
  // 控制高亮显示
  const [active, setActive] = useState(0)
  // 给tab传的onchange事件
  const onChange = (e: number) => {
    setActive(e)
  }
  // 关闭弹出层
  const onClose = () => {
    setVisible(false)
  }
  const dispatch = useDispatch()
  useEffect(() => {
    // 发请求，获取用户频道列表
    dispatch(getUserChannels() as any)
    dispatch(getAllChannels() as any)
  }, [dispatch])
  const tabs = useSelector((state: RootType) => state.home.userChannels)
  return (
    <div className={styles.root}>
      <Tabs tabs={tabs} index={active} onChange={onChange}>
        {tabs.map((item) => (
          <ArticleList key={item.id} channelId={item.id} aid={tabs[active].id}></ArticleList>
        ))}
      </Tabs>
      <div className="tabs-opration">
        <Icon
          type="iconbtn_search"
          onClick={() => {
            history.push('/search')
          }}
        />
        <Icon type="iconbtn_channel" onClick={() => setVisible(true)} />
      </div>
      {/* 弹出层组件 */}
      <Popup className="my-drawer" visible={visible} position="left" bodyStyle={{ width: '1000vw' }}>
        {visible && <Channels onClose={onClose} index={active} onChange={onChange}></Channels>}
      </Popup>
      <MoreAction></MoreAction>
    </div>
  )
}
